<template>
  <div class="musichall">
    <!-- 搜索框 -->
    <van-search placeholder="请输入搜索关键词" />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item><img src="../assets/lunbo1.gif" alt="" /></van-swipe-item>
      <van-swipe-item><img src="../assets/lunbo2.jpg" alt="" /></van-swipe-item>
      <van-swipe-item><img src="../assets/lunbo3.jpg" alt="" /></van-swipe-item>
      <van-swipe-item><img src="../assets/lunbo4.jpg" alt="" /></van-swipe-item>
    </van-swipe>
    <!-- 分类 -->
    <van-grid class="gird">
      <van-grid-item icon="manager-o" text="歌手" />
      <van-grid-item icon="bar-chart-o" text="排行" />
      <van-grid-item icon="apps-o" text="分类歌单" to="/singer" />
      <van-grid-item icon="service-o" text="音乐电台" />
      <van-grid-item icon="video-o" text="直播" />
    </van-grid>
    <!-- 编辑精选 -->
    <div class="title">编辑甄选</div>
    <div class="selected">
      <van-grid :border="false" :column-num="3">
        <van-grid-item v-for="item in banner" :key="item.actid">
          <van-image :src="item.picurl" />
          <span>{{ item.intro }}</span>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 话题 -->
    <div>
      <div class="huati">
        <div class="chaohua"><span>#霉霉又叒叒录歌了ヾ(✿ﾟ▽ﾟ)ノ</span></div>
        <div class="chaohua"><span>#创4神仙画手聚集地</span></div>
        <div class="chaohua"><span>#NCT李泰容自作曲音源公开</span></div>
        <div class="chaohua"><span>#范迪塞尔问候中国影迷</span></div>
      </div>
    </div>
    <!-- 新歌新碟 -->
    <van-tabs>
      <van-tab title="新歌">
        <div class="newsong">
          <div class="bbox">
            <div class="songbox">
              <div class="img">
                <img src="../assets/song1.jpg" />
              </div>
              <div class="songname">
                <h3>Another Great Day!!</h3>
                <span>Lisa</span>
              </div>
            </div>
          </div>
          <div class="bbox">
            <div class="songbox">
              <div class="img">
                <img src="../assets/song2.jpg" />
              </div>
              <div class="songname">
                <h3>分身</h3>
                <span>单以纯</span>
              </div>
            </div>
          </div>
          <div class="bbox">
            <div class="songbox">
              <div class="img">
                <img src="../assets/song3.jpg" />
              </div>
              <div class="songname">
                <h3>下雨天</h3>
                <span>RISE夏之光</span>
              </div>
            </div>
          </div>
          <div class="bbox">
            <div class="songbox">
              <div class="img">
                <img src="../assets/song4.jpg" />
              </div>
              <div class="songname">
                <h3>DIVE</h3>
                <span>Vinxin</span>
              </div>
            </div>
          </div>
          <div class="bbox">
            <div class="songbox">
              <div class="img">
                <img src="../assets/song5.jpg" />
              </div>
              <div class="songname">
                <h3>kura kura</h3>
                <span>Twice</span>
              </div>
            </div>
          </div>
          <div class="bbox">
            <div class="songbox">
              <div class="img">
                <img src="../assets/song6.jpg" />
              </div>
              <div class="songname">
                <h3>Rumba</h3>
                <span>Maluma</span>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="新碟">
        <div class="newalbums">
          <div class="bbox">
            <div class="songbox" v-for="item in albums" :key="item.id">
              <div class="img">
                <img src="../assets/newalbums/1.jpg" />
              </div>
              <div class="songname">
                <h3>{{ item.name }}</h3>
                <span>{{ item.singers[0].name }}</span>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="数字专辑">
        <div class="albumbox">
          <div class="album">
            <div class="imgbox">
              <img src="../assets/newalbums/2.jpg" alt="" />
            </div>
            <div class="singbox">
              <div><span>EPSILON</span></div>
              <div style="color: #ccc">THE9-刘雨昕</div>
              <div><span class="price">¥8</span></div>
            </div>
            <div>
              <span></span>
            </div>
          </div>
          <div class="album">
            <div class="imgbox">
              <img src="../assets/newalbums/3.jpg" alt="" />
            </div>
            <div class="singbox">
              <div><span>风吹过</span></div>
              <div style="color: #ccc">鹿晗</div>
              <div><span class="price">¥3</span></div>
            </div>
            <div>
              <span></span>
            </div>
          </div>
          <div class="album">
            <div class="imgbox">
              <img src="../assets/newalbums/4.jpg" alt="" />
            </div>
            <div class="singbox">
              <div><span>和.唱</span></div>
              <div style="color: #ccc">郑容和</div>
              <div><span class="price">¥8</span></div>
            </div>
            <div>
              <span></span>
            </div>
          </div>
          <div class="album">
            <div class="imgbox">
              <img src="../assets/newalbums/5.jpg" alt="" />
            </div>
            <div class="singbox">
              <div><span>Your Kwin</span></div>
              <div style="color: #ccc">ONER木子洋</div>
              <div><span class="price">¥8</span></div>
            </div>
            <div>
              <span></span>
            </div>
          </div>
          <div class="album">
            <div class="imgbox">
              <img src="../assets/newalbums/6.jpg" alt="" />
            </div>
            <div class="singbox">
              <div><span>迷</span></div>
              <div style="color: #ccc">蔡徐坤</div>
              <div><span class="price">¥26</span></div>
            </div>
            <div>
              <span></span>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>

    <!-- 排行榜 -->
    <div style="margin: 10px">排行榜</div>
    <div class="Top">
      <div class="bbox">
        <div class="songbox" v-for="item in topList" :key="item.id">
          <div class="img">
            <img :src="item.picUrl" />
          </div>
          <div class="songname">
            <span
              >1.{{ item.songList[0].songname }} ----
              {{ item.songList[0].singername }}</span
            >
            <br />
            <span
              >2.{{ item.songList[1].songname }} ----
              {{ item.songList[1].singername }}</span
            >
            <br />
            <span
              >3.{{ item.songList[2].songname }} ----
              {{ item.songList[2].singername }}</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    banner: [],
    topList: [],
    albums: [],
  }),
  methods: {
    async getDigitalAlbumLists() {
      const res = await this.$http.getDigitalAlbumLists();
      this.banner = res.data.response.data.banner;
    },
    async getTopLists() {
      const res = await this.$http.getTopLists();
      this.topList = res.data.response.data.topList;
    },
    async getNewDisks() {
      const res = await this.$http.getNewDisks();
      this.albums = res.data.response.new_album.data.albums;
    },
  },
  created() {
    this.getDigitalAlbumLists();
    this.getTopLists();
    this.getNewDisks();
  },
};
</script>
<style lang="scss">
.musichall {
  //轮播图
  .my-swipe {
    margin: 10px;
    border-radius: 5px;
    .van-swipe-item {
      font-size: 20px;
      line-height: 15px;
      text-align: center;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  //分类
  .van-grid {
    overflow-x: auto;
    flex-wrap: nowrap;
    color: #58d59d;
  }
  .title {
    margin: 10px;
  }
  //编辑精选
  .selected {
    span {
      width: 135px;
      font-size: 10px;
      text-align: center;
      color: #000;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .van-grid-item {
      width: 160px;
      height: 100%;
      img {
        border-radius: 8px;
        width: 145px;
        height: 70px;
      }
    }
  }
  //话题
  .huati {
    display: flex;
    overflow-x: auto;
    .chaohua {
      display: flex;
      width: 210px;
      height: 40px;
      span {
        margin: 10px;
        width: 180px;
        font-size: 10px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border: 1px solid #dcdcdc;
        background: #dcdcdc;
        border-radius: 15px;
      }
    }
  }
  //新歌
  .newsong {
    display: flex;
    overflow-x: auto;
    .bbox {
      flex-wrap: nowrap;
      width: 375px;
      height: 120px;
    }
    .songbox {
      display: flex;
      width: 375px;
      height: 100px;
      .songname {
        width: 190px;
        margin-left: 20px;
        height: 100px;
        span {
          font-size: 14px;
        }
      }
      img {
        margin: 10px;
        border-radius: 5px;
        width: 100px;
        height: 100px;
      }
    }
  }
  //新碟
  .newalbums {
    display: flex;
    overflow-x: auto;
    .bbox {
      flex-wrap: nowrap;
      width: 375px;
      height: 120px;
    }
    .songbox {
      display: flex;
      width: 375px;
      height: 100px;
      margin: 10px;
      .songname {
        width: 170px;
        margin-left: 20px;
        height: 100px;
        span {
          font-size: 14px;
        }
      }
      img {
        margin: 10px;
        border-radius: 5px;
        width: 100px;
        height: 100px;
      }
    }
  }
  //数字专辑
  .albumbox {
    display: flex;
    overflow-x: auto;
    .album {
      width: 150px;
      height: 150px;
      margin: 10px;
      .imgbox {
        img {
          border-radius: 5px;
          width: 100px;
          height: 100px;
        }
      }
      .singbox {
        width: 80px;
        height: 80px;
        div {
          font-size: 12px;
        }
      }
    }
  }
  //排行榜
  .Top {
    display: flex;
    overflow-x: auto;
    .bbox {
      flex-wrap: nowrap;
      width: 375px;
      height: 320px;
      margin: 10px;
    }
    .songbox {
      display: flex;
      width: 375px;
      height: 100px;
      margin-bottom: 10px;
      .songname {
        width: 170px;
        margin-left: 20px;
        height: 100px;
        text-align: left;
        line-height: 35px;
        overflow: hidden;
        text-overflow: ellipsis;
        // white-space: nowrap;
        span {
          width: 135px;
          font-size: 10px;
          text-align: center;
          color: #000;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      img {
        border-radius: 5px;
        width: 100px;
        height: 100px;
      }
    }
  }
}
</style>
